<template>
  <div class="app-container">
    <el-button type="primary" style="margin-bottom: 20px;" @click="openDialog(null)"><i class="el-icon-edit" />新建菜单</el-button>
    <el-table
      :data="list"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column
        prop="id"
        label="id"
        sortable
        width="180"
      />
      <el-table-column
        prop="path"
        label="路由"
        sortable
        width="180"
      />
      <el-table-column
        prop="name"
        label="路由名称"
        sortable
        width="180"
      />
      <el-table-column
        prop="title"
        label="标题"
      />
      <el-table-column
        prop="icon"
        label="图标"
      >
        <template slot-scope="scope">
          <svg-icon :icon-class="scope.row.icon" />
        </template>
      </el-table-column>
      <el-table-column
        prop="component"
        label="前端文件路径"
      />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="openDialog(scope.row)"
          >编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="remove(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="菜单编辑" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="路由" label-width="120px">
          <el-input v-model="form.path" />
        </el-form-item>
        <el-form-item label="路由名称" label-width="120px">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="标题" label-width="120px">
          <el-input v-model="form.title" />
        </el-form-item>
        <el-form-item label="图标" label-width="120px">
          <icon-select :value="form.icon" @change="choseIcon" />
        </el-form-item>
        <el-form-item label="前端文件路径" label-width="120px">
          <el-input v-model="form.component" />
        </el-form-item>
        <el-form-item label="父级菜单" label-width="120px">
          <el-cascader
            v-model="selectedOptions"
            placeholder="父级菜单"
            :options="list"
            :props="props"
            clearable
          />
        </el-form-item>
        <el-form-item label="分配api菜单" label-width="120px">
          <el-cascader
            v-model="form.api_menus"
            placeholder="分配api菜单"
            :options="api_menu_list"
            :props="api_props"
            clearable
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="edit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import IconSelect from '@/components/Common/IconSelect/Index'

import { getMenus, addOrEditMenu, delMenu } from '@/api/menus'
import { getAllList } from '@/api/apiMenus'

export default {
  inject: ['reload'],
  components: { IconSelect },
  data() {
    return {
      list: [],
      form: {
        menu_id: '',
        path: '',
        name: '',
        title: '',
        icon: '',
        component: '',
        pid: '',
        api_menus: []
      },
      dialogFormVisible: false,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      props: {
        value: 'id',
        label: 'name',
        children: 'children',
        checkStrictly: true
      },
      selectedOptions: [],
      api_props: {
        value: 'id',
        label: 'name',
        children: 'children',
        multiple: true
      },
      api_menu_list: []
    }
  },

  created() {
    this.getList()
    this.getApiMenuList()
  },

  methods: {
    getList() {
      getMenus().then(res => {
        const { data } = res
        this.list = data
      })
    },

    getApiMenuList() {
      getAllList(1).then(res => {
        const { data } = res
        this.api_menu_list = data
      })
    },

    getParentId(data, pid) {
      data.forEach(v => {
        if (v.id === pid) {
          this.selectedOptions.unshift(v.id)
          return true
        } else {
          if (v.children) {
            return this.getParentId(v.children, pid)
          } else {
            return true
          }
        }
      })
    },

    openDialog(data) {
      if (data === null) {
        this.form = {
          menu_id: '',
          path: '',
          name: '',
          title: '',
          icon: '',
          component: '',
          pid: '',
          api_menus: []
        }
        this.selectedOptions = []
      } else {
        this.form = JSON.parse(JSON.stringify(data))
        this.form.menu_id = data.id
        this.form.pid = data.pid
        this.selectedOptions = []
        this.getParentId(this.list, data.pid)
      }

      this.dialogFormVisible = true
    },

    choseIcon(value) {
      this.form.icon = value
    },

    edit() {
      this.dialogFormVisible = false
      this.form.pid = this.selectedOptions.pop()
      addOrEditMenu(this.form).then(res => {
        this.getList()
      })
    },

    remove(data) {
      delMenu({ menu_id: data.id }).then(res => {
        this.list = this.getList()
      })
    }
  }
}
</script>
